<template>
  <articles-layout class="list-page">
    <div slot="main">
      <main-list :data="dataList" />
      <div class="list-more-btn"
           :class="{'is-btn': hasMore && !loading}"
           @click.stop="fetchData"
      >{{moreText}}</div>
    </div>
    <side-container slot="side" title="推荐资讯" :show-more="false">
      <side-list :data="recList"/>
    </side-container>
  </articles-layout>
</template>

<script>
  import ArticlesLayout from './components/ArticlesLayout'
  import SideContainer from './components/SideContainer'
  import SideList from './components/SideList'
  import MainList from './components/MainList'

  import {geneDetailRoute, fieldState} from "@/mixins"

  import {fetchList, fetchMore} from '@/api/homeRequest'

  export default {
    name: "listPage",
    mixins: [geneDetailRoute, {methods: fieldState.methods}],
    props: {
      field: String
    },
    data() {
      return {
        dataList: [],
        recList: [],
        recCount: 10,
        pageSize: 10,
        lastDataId: '',
        hasMore: true,
        loading: false
      }
    },
    computed: {
      navType() {
        const vm = this;
        let navInfo = vm.$store.state.navInfo[vm.field] || {};
        return navInfo.key || ''
      },
      moreText() {
        const vm = this;
        if (vm.loading) {
          return '加载中...'
        } else if (vm.hasMore){
          return '点击加载更多'
        } else {
          return '已经到底啦'
        }
      }
    },
    watch: {
      field() {
        // 重置列表
        this.init()
      }
    },
    methods: {
      init() {
        // 重置列表
        const vm = this;
        vm.lastDataId = '';
        vm.dataList = [];
        vm.hasMore = true;

        vm.commitField();
        vm.fetchData();
        vm.fetchRecList();
      },
      fetchData() {
        const vm = this;
        if (!vm.hasMore) {
          return false;
        }
        let params = {pageSize: vm.pageSize}
        if (vm.navType) {
          params.navType = vm.navType
        }
        if (vm.lastDataId) {
          params.dataId = vm.lastDataId;
        }
        vm.loading = true;
        fetchMore(params).then(res => {
          vm.appendMore(res.data.items);
        }).catch(() => {
          vm.appendMore([]);
        }).then(() => {
          vm.loading = false;
        })
      },
      fetchRecList(navCode) {
        const vm = this;
        fetchList(navCode, {pageSize: vm.recCount + 8}).then(res => {
          vm.setRecList(res.data.items);
        });
      },
      setRecList(list = []) {
        const vm = this;
        list = vm.$util.randomSort(list);
        let result = [];
        for (let item of list) {
          if (item.item.dataId !== vm.id && result.length !== vm.recCount) {
            result.push(item.item);
          }
        }
        vm.recList = result;
      },
      appendMore(list = []) {
        const vm = this;
        let result = list.map(item => {
          return item.item;
        })
        vm.dataList.push(...result);
        if (result.length > 0) {
          vm.lastDataId = result[result.length - 1].dataId;
        }
        if (result.length < vm.pageSize) {
          vm.hasMore = false;
        }
      }

    },
    created() {
      this.init()
    },
    components: {
      SideContainer,
      SideList,
      ArticlesLayout,
      MainList
    }
  }
</script>

<style scoped>
  .list-more-btn{
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    color: #656565;
  }
  .is-btn{
    cursor: pointer;
  }
</style>
